<template>
	<!-- 本机号码一键登录 -->
	<view class="content">
		<view class="empty"></view>
		<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button> -->
		<view class="img2">
			<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/8acd263a-46df-464f-af5a-5d1bb1a1a9b7.png" mode="scaleToFill"></image>
		</view>
		<view class="phoneNum">
			<span>{{phoneNum}}</span>
		</view>
		
		<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :style="effect?'opacity:0.8':''" @click="login">本机号码一键登录</button>
		
		<view class="other" @click="toLogin1">
			其他号码登录
		</view>
		
		<view class="agree">
			<view class="img" v-show="!agree" @click="agree=true">
				<image src="/static/img/login/Group111@2x.png" alt="" v-show="!agree" mode="scaleToFill"></image>
			</view>
			<view class="img" v-show="agree" @click="agree=false">
				<image src="/static/img/login/Group111@2x2.png" alt="" v-show="agree" mode="scaleToFill"></image>
			</view>
			
			<span>登录即同意</span><span>《一键登录协议》</span><span>与</span><span>《用户使用协议》</span><br>
			<span>以及</span><span>《隐私声明》</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:'',
				agree:false,
				effect:false,
				decodePhoneParams:{
					code:''
				}
			}
		},
		onLoad() {
			this.hidePhoneNum('18072540048');
			
			// btn[0].onclick=function(){
			// 	console.log('click');
			// }
			// console.log(btn[0].clientHeight);
		},
		methods: {
			hidePhoneNum(number){
				let arr=number.split('')
				arr.splice(3,4,'****')
				this.phoneNum=arr.join('')
			},
			// 获取code
			getCode() {
			        uni.login({
						provider: 'weixin',
						success: loginRes => {
							console.log(loginRes);
							this.decodePhoneParams.code = loginRes.code
						}
			        });
			},
			getPhoneNumber(e) {
				this.getCode();
				console.log(e);
				if(!this.decodePhoneParams.code || !e.detail.encryptedData){
					
						return false;
				}
				this.decodePhoneParams.encryptedData = e.detail.encryptedData;
				this.decodePhoneParams.iv = e.detail.iv;
				this.$u.api
						.postDecodeUserInfo(this.decodePhoneParams)
						.then(res => {
								console.log(res, '[地址管理-获取用户手机号]');
								this.params.mobile = res.data.phoneNumber
						})
						.catch(err => {
								console.log(err);
						});
			},
			login(){
				this.effect=true;
				//按钮点击效果
				let timer=setTimeout(()=>{
					this.effect=false;
					clearTimeout(timer)
				},100)
				
				
				// uni.getSystemInfo({
				// 	success:res=>{
				// 		console.log(res);
				// 		let did=uni.getStorageSync('did')
				// 		let brand=res.brand
				// 	}
				// })
				// uni.getUserProfile({
				// 	desc: '获取你的昵称、头像、地区及性别',
				// 	success: res => {
				// 		console.log('getUserProfile',res);
						
				// 	},
				// 	fail: res => {
				// 		console.log('获取用户信息失败');
				// 		that.num=0
				// 		uni.removeStorageSync('token')
				// 	}
				// });
				
				
			},
			//前往密码登录
			toLogin1(){
				uni.redirectTo({
					url:'./login1'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1rpx 0;
		height: 100vh;
		background-color: #FFFFFF;
		
		.empty{
			height: 1px;
		}
		
		.img2{
			width: 100%;
			height: 400rpx;
			text-align: center;
			image{
				width: 216rpx;
				height: 216rpx;
				margin-top: 148rpx;
			}
		}
		.phoneNum{
			margin-top: 60rpx;
			font-size: 24px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #001A18;
		}
		.button{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			background: #08C8BD;
			border-radius: 16rpx;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			transition: 0.1s;
		}
		.other{
			font-size: 14px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #001A18;
		}
		.agree{
			text-align: center;
			position: absolute;
			bottom:50rpx;
			.img{
				display: inline-block;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					vertical-align: -4rpx;
				}
			}
			
			span:nth-of-type(odd){
				font-size: 24rpx;
				color: #99A3A3;
			}
			span:nth-of-type(even){				
				font-size: 24rpx;
				color: #08C8BD;
			}
		}
	}
</style>
